// 表格模板
import { defineComponent, ref, reactive, computed } from "vue";
import { dxget, transferTimeYMDHm } from "../../util/index";
import { hf } from "../../util/index";
import st from "../../store/index";

export default defineComponent({
  props: {
    url: {
      type: String,
    },
    columns: {
      type: Array,
    },
    colRight: {
      type: Array,
    },
    obj: {
      type: Object,
      default: {},
    },
    observetype: {
      type: String,
      default: "",
    },
  },
  setup(props, { expose }) {
    let tableData = ref([]);
    let show = ref(true);
    let DateTime = ref();
    const paginationReactive = reactive({
      page: 1,
      pageCount: 1,
      pageSize: 9999,
      onChange: (page) => {
        paginationReactive.page = page;
      },
    });

    // 查询查询
    const TheQueryAgain = (index) => {
      paginationReactive.page = 1;
      initData();
    };

    // 短线助手
    const dx = (num) => {
      if (num == 1) {
        tableData.value = qdata;
      } else if (num == 2) {
        tableData.value = tableData.value.filter(
          (c) =>
            c.f3 >= 3 &&
            c.f3 <= 5 &&
            c.f8 >= 5 &&
            c.f8 <= 10 &&
            c.f21 >= 5000000000 &&
            c.f21 <= 20000000000
        );
      }
    };

    expose({
      TheQueryAgain,
      dx,
    });
    let qdata = [];
    let columns = [
      ...props.columns,
      {
        title: "股票号码",
        key: "f12",
        sorter: (row1, row2) => row1.f12 - row2.f12,
        align: "center",
      },
      {
        title: "股票名称",
        key: "f14",
        align: "center",
        fixed: "left",
      },
      {
        title: "当前价",
        key: "f2",
        align: "center",
        width: 60,
      },
      {
        title: "当日均价",
        key: "junjia",
        width: 60,
        align: "center",
      },

      {
        title: "涨幅%",
        align: "center",
        sorter: (row1, row2) => row1.f25 - row2.f25,
        children: [
          {
            title: "今日",
            key: "f3",
            align: "center",
            width: 70,
            sorter: (row1, row2) => row1.f3 - row2.f3,
            render(row) {
              return row.f3 + "%";
            },
          },

          {
            title: "五日",
            align: "center",
            key: "f109",
            width: 70,
            sorter: (row1, row2) => row1.f109 - row2.f109,
            render(row) {
              return row.f109 + "%";
            },
          },
          {
            title: "十日",
            align: "center",
            key: "f160",
            sorter: (row1, row2) => row1.f160 - row2.f160,
            render(row) {
              return row.f160 + "%";
            },
          },

          {
            title: "近1月",
            align: "center",
            key: "f110",
            sorter: (row1, row2) => row1.f110 - row2.f110,
            render(row) {
              return row.f110 + "%";
            },
          },
          {
            title: "近1年",
            key: "f403",
            align: "center",
            sorter: (row1, row2) => row1.f403 - row2.f403,
            render(row) {
              return row.f403 + "%";
            },
          },
          {
            title: "今年",
            key: "f25",
            align: "center",
            sorter: (row1, row2) => row1.f25 - row2.f25,
            render(row) {
              return row.f25 + "%";
            },
          },
        ],
      },
      {
        title: "振幅",
        key: "f7",
        width: 70,
        align: "center",
        render(row) {
          return row.f7 + "%";
        },
      },
      {
        title: "流入金额",
        key: "f62",
        width: 90,
        align: "center",
        sorter: (row1, row2) => row1.f62 - row2.f62,
        render(row) {
          let isminus = false;
          let jiner = row.f62;
          if (jiner < 0) {
            jiner = -jiner;
            isminus = true;
          }
          if (jiner / 100000000 >= 1) {
            jiner = parseFloat("" + jiner / 100000000).toFixed(2) + "亿";
          } else if (jiner / 10000 >= 1) {
            jiner = parseFloat("" + jiner / 10000).toFixed(2) + "万";
          }

          return (isminus ? "-" : "") + jiner;
        },
      },
      {
        title: "主力占比",
        width: 100,
        align: "center",
        children: [
          {
            title: "今日",
            width: 80,
            align: "center",
            key: "f184",
            sorter: (row1, row2) => row1.f184 - row2.f184,
            render(row) {
              return row.f184 + "%";
            },
          },
          {
            title: "5日",
            width: 80,
            align: "center",
            key: "f165",
            sorter: (row1, row2) => row1.f165 - row2.f165,
            render(row) {
              return row.f165 + "%";
            },
          },
          {
            title: "10日",
            width: 80,
            align: "center",
            key: "f175",
            sorter: (row1, row2) => row1.f175 - row2.f175,
            render(row) {
              return row.f175 + "%";
            },
          },
        ],
      },
      // {
      //   width: 80,
      //   title: "涨幅金额",
      //   key: "f4",
      //   align: "center",
      // },
      // {
      //   title: "今开",
      //   key: "f17",
      //   width: 70,
      //   align: "center",
      // },
      // {
      //   title: "最高",
      //   key: "f15",
      //   width: 70,
      //   align: "center",
      // },
      // {
      //   title: "最低",
      //   key: "f16",
      //   width: 70,
      //   align: "center",
      // },
      {
        title: "量比",
        key: "f10",
        width: 60,
        align: "center",
      },
      // {
      //   title: "成交量(手)",
      //   key: "f5",
      //   align: "center",
      //   render(row) {
      //     return (row.f5 / 10000).toFixed(2) + "万";
      //   },
      // },
      // {
      //   title: "成交金额",
      //   key: "f6",
      //   align: "center",
      //   render(row) {
      //     return (row.f6 / 100000000).toFixed(2) + "亿";
      //   },
      // },
      // {
      //   title: "流值",
      //   key: "f21",
      //   align: "center",
      //   render(row) {
      //     return (row.f21 / 100000000).toFixed(2) + "亿";
      //   },
      // },
      {
        title: "换手率",
        key: "f8",
        width: 70,
        align: "center",
        render(row) {
          return row.f8 + "%";
        },
      },
      {
        title: "所属板块",
        key: "f100",
        align: "center",
      },
      ...props.colRight,
    ];
    const initData = async (isLoad?) => {
      if (isLoad != 1) {
        st.state.tableLoad = true;
      }
      // if(props.url=='gupiao/ShortTermAssistant'&&st.state.lsInfo.length>0){
      //   st.state.tableLoad = false;
      //   tableData.value=st.state.lsInfo
      // }

      const { data }: any = await dxget(props.url, {
        pageNum: 1,
        ...props.obj,
      });
      st.state.tableLoad = false;
      show.value = false;
      tableData.value = data;
      qdata = data;
    };
    initData();
    const handlePageChange = (page) => {
      paginationReactive.page = page;
      initData();
    };
    const rowClassName = (row, index) => {
      if (row.f3 >= 0) {
        return "red";
      }
      return "ls";
    };
    const rowProps = (row, aa) => {
      return {
        style: "cursor: pointer;",
        onClick: (idx) => {
          hf("stockDetails", {
            code: row.f12,
            observetype: props.observetype,
          });
        },
      };
    };

    const currentTime = computed(() => {
      const newDate = new Date();
      const Hours = newDate.getHours();
      const myddy = newDate.getDay(); //获取存储当前日期
      DateTime.value = transferTimeYMDHm(st.state.currentTime);
      /*每天的15点以后 和9点前 周六和周天 不刷新 */
      console.log(myddy);
      if (props.url == "gupiao/ShortTermAssistant") {
        return;
      }
      if (Hours > 15 || Hours < 8 || myddy == 6 || myddy == 0) {
        return;
      }
      initData(1);
      return st.state.currentTime;
    });

    return () => (
      <>
        <div data-currentTime={currentTime.value}>
          <n-spin show={st.state.tableLoad}>
            <n-data-table
              size="small"
              class="mt10"
              max-height="800"
              scroll-x="1800"
              row-class-name={rowClassName}
              pagination={paginationReactive}
              columns={columns}
              data={tableData.value}
              single-line={false}
              row-props={rowProps}
            />
          </n-spin>
        </div>
      </>
    );
  },
});
